<a href='https://github.com/angular/angular.js/edit/v1.4.x/src/ng/directive/attrs.js?message=docs(ngDisabled)%3A%20describe%20your%20change...#L154' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.4.7/src/ng/directive/attrs.js#L154' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">ngDisabled</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - directive in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>



<div class="api-profile-description">
  <p>This directive sets the <code>disabled</code> attribute on the element if the
<a href="guide/expression">expression</a> inside <code>ngDisabled</code> evaluates to truthy.</p>
<p>A special directive is necessary because we cannot use interpolation inside the <code>disabled</code>
attribute.  The following example would make the button enabled on Chrome/Firefox
but not on older IEs:</p>
<pre><code class="lang-html">&lt;!-- See below for an example of ng-disabled being used correctly --&gt;
&lt;div ng-init=&quot;isDisabled = false&quot;&gt;
 &lt;button disabled=&quot;{{isDisabled}}&quot;&gt;Disabled&lt;/button&gt;
&lt;/div&gt;
</code></pre>
<p>This is because the HTML specification does not require browsers to preserve the values of
boolean attributes such as <code>disabled</code> (Their presence means true and their absence means false.)
If we put an Angular interpolation expression into such an attribute then the
binding information would be lost when the browser removes the attribute.</p>

</div>




<div>
  

  
  <h2>Directive Info</h2>
  <ul>
    
    <li>This directive executes at priority level 100.</li>
    
  </ul>

  
  <h2 id="usage">Usage</h2>
  <div class="usage">
  
    <ul>
    <li>as attribute:
        <pre><code>&lt;INPUT&#10;  ng-disabled=&quot;expression&quot;&gt;&#10;...&#10;&lt;/INPUT&gt;</code></pre>
      </li>
    
  </div>
  
<section class="api-section">
  <h3>Arguments</h3>

<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        ngDisabled
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-expression">expression</a>
      </td>
      <td>
        <p>If the <a href="guide/expression">expression</a> is truthy,
    then the <code>disabled</code> attribute will be set on the element</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

</section>
  


  
  <h2 id="example">Example</h2><p>

<div>
  <a ng-click="openPlunkr('examples/example-example54', $event)" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

  <div class="runnable-example"
      path="examples/example-example54">

  
    <div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>&lt;label&gt;Click me to toggle: &lt;input type=&quot;checkbox&quot; ng-model=&quot;checked&quot;&gt;&lt;/label&gt;&lt;br/&gt;&#10;&lt;button ng-model=&quot;button&quot; ng-disabled=&quot;checked&quot;&gt;Button&lt;/button&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>it(&#39;should toggle button&#39;, function() {&#10;  expect(element(by.css(&#39;button&#39;)).getAttribute(&#39;disabled&#39;)).toBeFalsy();&#10;  element(by.model(&#39;checked&#39;)).click();&#10;  expect(element(by.css(&#39;button&#39;)).getAttribute(&#39;disabled&#39;)).toBeTruthy();&#10;});</code></pre>
    </div>
  

    <iframe class="runnable-example-frame" src="examples/example-example54/index.html" name="example-example54"></iframe>
  </div>
</div>


</p>

</div>


